FROM registry.cn-hangzhou.aliyuncs.com/xiaoyilin/nodejs:22.20.0  AS builder
WORKDIR /usr/local/
RUN npm i -g pnpm && \
pnpm create vite vue3tailwindcss4 --template vue
# pnpm create vite vue3tailwindcss4 --template vue-ts
# 第二阶段
FROM registry.cn-hangzhou.aliyuncs.com/xiaoyilin/nodejs:22.20.0 
LABEL author=xiaoyilin
LABEL email=406735078@qq.com
ENV TZ=Asia/Shanghai
WORKDIR /usr/local/vue3tailwindcss4
COPY --from=builder /usr/local/vue3tailwindcss4 /usr/local/vue3tailwindcss4
RUN npm i -g pnpm && \
pnpm add vue-router@4 && \
pnpm add pinia && \
pnpm add axios && \
pnpm add -D vite-plugin-vue-devtools && \
pnpm i -D tailwindcss @tailwindcss/postcss postcss && \
touch postcss.config.mjs && \
echo 'export default {' >> postcss.config.mjs && \
echo '  plugins: {' >> postcss.config.mjs && \
echo '    "@tailwindcss/postcss": {},' >> postcss.config.mjs && \
echo '  }' >> postcss.config.mjs && \
echo '}' >> postcss.config.mjs && \
echo '@import "tailwindcss";' > src/style.css && \
# 组件
echo '<script setup>' > src/components/HelloWorld.vue && \
echo "import { ref } from 'vue'" >> src/components/HelloWorld.vue && \
echo 'defineProps({' >> src/components/HelloWorld.vue && \
echo '  msg: String,' >> src/components/HelloWorld.vue && \
echo '})' >> src/components/HelloWorld.vue && \
echo '</script>' >> src/components/HelloWorld.vue && \
echo '<template>' >> src/components/HelloWorld.vue && \
echo '  <h1 class="text-2xl text-center italic text-red-300">{{ msg }}</h1>' >> src/components/HelloWorld.vue && \
echo '</template>' >> src/components/HelloWorld.vue && \
echo '<style scoped>' >> src/components/HelloWorld.vue && \
echo '</style>' >> src/components/HelloWorld.vue && \
# 
echo '<script setup>' > src/App.vue && \
echo "import HelloWorld from './components/HelloWorld.vue'" >> src/App.vue && \
echo '</script>' >> src/App.vue && \
echo '<template>' >> src/App.vue && \
echo '<div>' >> src/App.vue && \
echo '<HelloWorld msg="Vite + Vue" />' >> src/App.vue && \
echo '</div>' >> src/App.vue && \
echo '</template>' >> src/App.vue && \
echo '<style scoped>' >>  src/App.vue && \
echo '</style>' >>  src/App.vue && \
# 配置
echo "import { defineConfig } from 'vite'" > vite.config.js && \
echo "import vue from '@vitejs/plugin-vue'" >> vite.config.js && \
echo "import vueDevTools from 'vite-plugin-vue-devtools'" >> vite.config.js && \
echo "export default defineConfig({" >> vite.config.js && \
echo "	server: {" >> vite.config.js && \
echo "		open: false," >> vite.config.js && \
echo "		host: '0.0.0.0'," >> vite.config.js && \
echo "		port: 5173," >> vite.config.js && \
echo "	  }," >> vite.config.js && \
echo "	plugins: [" >> vite.config.js && \
echo "		vue()," >> vite.config.js && \
echo "		vueDevTools()," >> vite.config.js && \
echo "	  ]," >> vite.config.js && \
echo "})" >> vite.config.js && \
pnpm install
CMD ["pnpm", "run", "dev"]

# docker build -t registry.cn-hangzhou.aliyuncs.com/xiaoyilin/vue3tailwindcss4 .
# docker run --name vue3tailwindcss4 -d -p 5173:5173 registry.cn-hangzhou.aliyuncs.com/xiaoyilin/vue3tailwindcss4
# docker run -it registry.cn-hangzhou.aliyuncs.com/xiaoyilin/vue3tailwindcss4 bash
# docker push registry.cn-hangzhou.aliyuncs.com/xiaoyilin/vue3tailwindcss4
# docker exec -it vue3tailwindcss4 bash